<template>
    <pui-drawer show :title="mainRef.passtitle" position="left">
        <div class="resource-drawer-content tree-list-content">
            <div class="horizontal-tab tab-item" v-show="mainRef.nowTabIndex === '0'">
                <div class="horizontal-tree tree-content border-btm">
                    <pui-tree :show="true" :dataList="mainRef.lineTree"></pui-tree>
                </div>
                <div class="horizontal-tree tree-content">
                    <pui-tree :show="true" :dataList="mainRef.columnTree"></pui-tree>
                </div>
            </div>
            <div class="vertical-tab tab-item" v-show="mainRef.nowTabIndex === '1'">
                <div class="horizontal-tree tree-content">
                    <pui-tree :show="true" :dataList="mainRef.verticalTree"></pui-tree>
                </div>
            </div>
            <pui-tabs :tabList="mainRef.tabList2" type="flex" @onClickHandle="tabClickHandle"></pui-tabs>
        </div>
    </pui-drawer>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'structure-dirctory',
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance } from 'vue'
import mainData from './index'
const { proxy } = getCurrentInstance() as any
const mainRef = reactive({
    passtitle:'横向结构设计目录',
    nowTabIndex: '0',
    tabList2: [
        {
            name: '横向结构',
            id: '0',
            title: '横向结构设计目录'
        },
        {
            name: '纵向结构',
            id: '1',
            title: '纵向结构设计目录'
        }
    ]as any[],
    lineTree: [{
        label: 'Line',
        value: 'Line',
        children: [
            {
                label: 'Line1',
                value: 'Line1',
                children: [
                    {
                        label: 'L1C1',
                        value: 'L1C1',
                    },
                    {
                        label: 'L1C2',
                        value: 'L1C2',
                    },
                    {
                        label: 'L1C3',
                        value: 'L1C3',
                    },
                ]
            },
            {
                label: 'Line2',
                value: 'Line2',
                children: [
                    {
                        label: 'L2C1',
                        value: 'L2C1',
                    },
                    {
                        label: 'L2C2',
                        value: 'L2C2',
                    },
                    {
                        label: 'L2C3',
                        value: 'L2C3',
                    },
                ]
            },
            {
                label: 'Line3',
                value: 'Line3',
                children: [
                    {
                        label: 'L3C1',
                        value: 'L3C1',
                    },
                    {
                        label: 'L3C2',
                        value: 'L3C2',
                    },
                    {
                        label: 'L3C3',
                        value: 'L3C3',
                    },
                ]
            },
        ]
    }],
    columnTree: [{
        label: 'Column',
        value: 'Column',
        children: [
            {
                label: 'Column1',
                value: 'Column1',
                children: [
                    {
                        label: 'L1C1',
                        value: 'L1C1',
                    },
                    {
                        label: 'L2C1',
                        value: 'L2C1',
                    },
                    {
                        label: 'L3C1',
                        value: 'L3C1',
                    },
                ]
            },
            {
                label: 'Column2',
                value: 'Column2',
                children: [
                    {
                        label: 'L1C2',
                        value: 'L1C2',
                    },
                    {
                        label: 'L2C2',
                        value: 'L2C2',
                    },
                    {
                        label: 'L3C2',
                        value: 'L3C2',
                    },
                ]
            },
            {
                label: 'Column3',
                value: 'Column3',
                children: [
                    {
                        label: 'L1C3',
                        value: 'L1C3',
                    },
                    {
                        label: 'L2C3',
                        value: 'L2C3',
                    },
                    {
                        label: 'L3C3',
                        value: 'L3C3',
                    },
                ]
            },
        ]
    }],
    verticalTree: [{
        label: 'Vertical',
        value: 'Vertical',
        children: [
            {
                label: 'Segment1',
                value: 'Segment1',
            },
            {
                label: 'Segment2',
                value: 'Segment2',
            },
            {
                label: 'Segment3',
                value: 'Segment3',
            },
            {
                label: 'Segment4',
                value: 'Segment4',
            },
            {
                label: 'Segment5',
                value: 'Segment5',
            },
        ]
    }]
})
const tabClickHandle = (e:any) => {
    mainRef.nowTabIndex = e.id
    mainRef.passtitle = e.title
}
const init = () => {
}
const showSetting = (e: any) => {
}
const onSubmit = () => {

}
defineExpose({
    init
})
</script>